<template lang="pug">
  view-box.index
    //- h1 {{ msg }}
    //- .container
    hall(v-show="index == 0" :user="userInfo")
    union(v-show="index == 1" :user="userInfo")
    home(v-show="index == 2" :user="userInfo")
    tabbar.footer(v-model="index" @on-index-change="onIndexChange")
      tabbar-item(:selected="index == 0" )
        img(src="../assets/index.png" slot="icon" )
        img.selected( src="../assets/index_focus.png" slot="icon-active" )
        img.label(v-show="index == 0" src="../assets/footer_selected.png" slot="label")
      tabbar-item(:selected="index == 1")
        img(src="../assets/union.png" slot="icon")
        img.selected(src="../assets/union_focus.png" slot="icon-active")
        img.label(v-show="index == 1" src="../assets/footer_selected.png" slot="label")
        //- span(slot="label") 工会
      tabbar-item(:selected="index == 2")
        img(src="../assets/user.png" slot="icon")
        img.selected(src="../assets/user_focus.png" slot="icon-active")
        img.label(v-show="index == 2" src="../assets/footer_selected.png" slot="label")
        //- span(slot="label") 我的
</template>

<script>
// 大厅
import router from '@/router'
import memberService from '@/api/member'

const hall = () => import('@/components/hall')
// 游戏大厅
const game = () => import('@/components/game')

// 个人中心
const home = () => import('@/components/home')
// 工会
const union = () => import('@/components/union')
export default {
  name: 'Index',
  data () {
    return {
      index: 0,
      userInfo :{}
    }
  },
  components: {
    hall,
    game,
    home,
    union
  },
  methods: {
    onIndexChange (index) {
      router.replace('/index?type=' + index, (e) => {}, (d) => {})
    },
    getUserInfo (){
      memberService.MemberInfo().then(usr =>{
        // console.log('usr', usr)
        this.userInfo = JSON.parse(JSON.stringify( usr.result))
        this.$forceUpdate()
      })
    }
  },
  created(){
    document.title = '练匠'
    this.getUserInfo()
  },
  beforeMount () {  
    this.index = parseInt(this.$route.query.type) || 0
  },

  mounted () {
    var that = this
    // setTimeout(() => {
      memberService.ShareConfig({
        url: window.location.href
      })
      .then(res => {
        console.log(res)
        console.log('ShareConfig',res)
        that.$wechat.config({
          debug: true,
          appId: res.result.appid,
          timestamp: res.result.timestamp,
          nonceStr: res.result.noncestr,
          signature: res.result.signature,
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline']
        })

        that.$wechat.ready((ress) => {
          // console.log('微信sdk成功')
          // console.log(res)
          var redirectUri = encodeURIComponent( 'http://www.game2385.com/index.html#/invitpage')
          var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + res.result.appid + '&redirect_uri=' + redirectUri + '&response_type=code&scope=snsapi_base&state='+that.userInfo.openid+'#wechat_redirect'
          that.$wechat.onMenuShareAppMessage({
            title: '邀请加入工会',
            desc: '加入公会',
            link: url,
            imgUrl: 'http://www.kmjiu.com/public/statics/images/216.png',
            success: function () {
                // alert('好友分享成功')
              // params.fn && params.fn()
            },
            cancel: function () {

            }
          })

          that.$wechat.onMenuShareTimeline({
            title: '邀请加入工会',
            link: url,
            imgUrl: '',
            success: function () {
            },
            cancel: function () {

            }
          })
        })

        that.$wechat.error(res => {
          console.log('微信sdk是失败')
          console.log(res)
        })
      })
    // }, 2000);
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .index{
    background-image: url('../assets/bg.jpg');
    background-size: 100% 100%;
    overflow: hidden;    
    .container{
      position: absolute;
      width: 100%;
      height: 100%;
      padding-bottom:65px;
      overflow-y: auto;
    }
    .footer{
      background-color: transparent;
      background-image:url('../assets/footer.png');
      background-size: 100% 100%;
      height:62px;
      border-top:0 solid transparent;
      &:before{
        border-top:0 solid transparent
      }
      .weui-tabbar__item{
        padding-top:12px ;
      }
      .weui-tabbar__icon{
        width: 30px ;
        height: 44px ;
      }
      .label{
        width: 60px;
        position: relative;
        top: -9px;
      }
    }
    
  }
  
</style>
